<template>
  <el-dialog
    :visible.sync="openProcessControlInfo"
    :fullscreen="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    :show-close="false" style="height: 800px;">
    <div style="
          border-bottom: 1px solid rgb(232,232,232);
          position: absolute;
          top: 0; left: 0;
          height: 70px; width: 100%;
          line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <span style="font-weight: bold; font-size: 20px;">{{ handlerTitle }}</span>

      <div style="float:right;">
        <el-button plain icon="el-icon-close" @click="openProcessControlInfo = false"></el-button>
      </div>
    </div>

    <div style="margin: 40px 40px 70px 40px;">
      <el-card class="box-card" style="margin-bottom: 20px;" v-show="userList.length > 0">
        <div slot="header" class="clearfix">
          <span>用户</span>
        </div>

        <el-row>
          <el-col :span="singleChoice ? 24 : 16"><div class="grid-content bg-purple" style="padding: 10px;">
            <el-table
              ref="multipleTable"
              :data="userList"
              height="265"
              max-height="265"
              border
              tooltip-effect="dark"
              style="width: 100%;"
              @selection-change="handleSelectionChange">
              <el-table-column
                v-if="singleChoice"
                key="radio"
                width="55"
                align="center">
                <template slot-scope="scope">
                  <el-radio v-model="userId" :label="
                    scope.row.userId + '-' + scope.row.nickName + '-' + scope.row.deptName
                  "><span></span></el-radio>
                </template>
              </el-table-column>
              <el-table-column
                v-if="!singleChoice"
                type="selection"
                key="select"
                align="center"
                width="55">
              </el-table-column>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
                sortable>
              </el-table-column>
              <el-table-column
                prop="nickName"
                align="center"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="phonenumber"
                align="center"
                label="手机号"
                width="150">
              </el-table-column>
              <el-table-column
                prop="deptName"
                align="center"
                label="部门名称">
              </el-table-column>
            </el-table>
          </div></el-col>
          <el-col :span="singleChoice ? 0 : 8">
            <div class="grid-content bg-purple-light" style="padding: 10px;">
              <div style="border: 1px solid #dfe6ec; width: 100%;height: 40px;padding: 10px; font-size: 16px;">
                <span style="float:left;">已选</span>
                <span style="float:right;">
                    <i style="cursor: pointer" class="el-icon-delete" @click="handleDeleteSelectUserButton()"></i>
                  </span>
              </div>
              <div style="border: 1px solid #dfe6ec; height: 226px; margin-top: -1px;padding: 10px; max-height: 226px;overflow-y: scroll;">
                <el-empty :image-size="60" v-show="!selectUserList.length > 0"></el-empty>
                <div v-for="(item,index) in selectUserList" :key="index"
                     style="padding: 10px; height: 40px; border: 1px solid #dfe6ec; margin-top: -1px;">
                  <span style="float:left;">{{ item.userId + '-' + item.nickName + '-' + item.deptName }}</span>
                  <span style="float:right;">
                      <i style="cursor: pointer" class="el-icon-delete" @click="handleDeleteSelectUserButton(item)"></i>
                    </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入处理意见"
        v-model="opinion">
      </el-input>
    </div>

    <div style="
        border-top: 1px solid rgb(232,232,232);
        position: absolute;
        bottom: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <div style="float:right; margin: 17px;">
        <el-button type="primary" style="float: right" @click="handleProcessInstance()" v-show="!completeButton">提交</el-button>

        <el-button type="primary" style="float: right" @click="handleCompleteTask(true)" v-show="completeButton">同意</el-button>
        <el-button type="danger" style="float: right" @click="handleCompleteTask(false)" v-show="completeButton">拒绝</el-button>
        <el-button plain style="float: right; margin-right: 20px;" @click="openProcessControlInfo = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import Constant from './constant'
import {
  addSign, cancelDelegate, completeDelegate,
  completeTask,
  delegate, deleteSign, relayComplete,
  selectAddSignUser,
  selectCompleteUser,
  selectDeleteSignUser
} from "@/api/camunda/camunda";
import {getSelectUserAll} from "@/api/system/user";

export default {
  name: "processControl",
  data() {
    return {
      openProcessControlInfo: false,

      userId: null,
      opinion: '',
      userList: [],
      checkUserList: [],
      selectUserList: [],
      singleChoice: false,
      taskId: undefined,
      map: {},

      handlerTitle: '',
      completeButton: false,
    }
  },
  methods: {
    // 初始化
    init(handleName, taskId, map) {
      this.reset()
      this.openProcessControlInfo = true
      this.completeButton = false
      this.handlerTitle = handleName
      this.taskId = taskId
      if(handleName === Constant.Complete){
        this.completeButton = true
        this.map = map
        this.handleSelectCompleteUser()
      }
      if(handleName === Constant.CompleteDelegate) {
        this.map = map
      }
      if(handleName === Constant.AddSign) {
        this.handleSelectAddSignUser()
      }
      if(handleName === Constant.DeleteSign) {
        this.handleSelectDeleteSignUser()
      }
      if(handleName === Constant.Delegate) {
        this.singleChoice = true
        this.handleSelectDelegateUser()
      }
      if(handleName === Constant.RelayComplete) {
        this.singleChoice = true
        this.handleSelectDelegateUser()
      }
    },
    // 重置数据
    reset() {
      this.openProcessControlInfo = false
      this.userId = null
      this.opinion = ''
      this.userList = []
      this.checkUserList = []
      this.selectUserList = []
      this.singleChoice = false
      this.taskId = undefined
      this.map = {}
      this.handlerTitle = ''
      this.completeButton = true
    },
    // 获取办理操作的用户列表
    handleSelectCompleteUser() {
      selectCompleteUser(this.taskId)
        .then(({data}) => {
          if(data){
            this.userList = data.selectUserList
            this.checkUserList = data.checkSelectUserList
            this.$nextTick(function(){
              /*现在数据已经渲染完毕*/
              this.checkUserList.forEach((item) => {
                this.userList.forEach((user) => {
                  if(user.userId === item.userId){
                    this.$refs.multipleTable.toggleRowSelection(user);
                  }
                })
              })
            })
          }
        }).catch()
    },
    // 获取加签操作的用户列表
    handleSelectAddSignUser() {
      selectAddSignUser(this.taskId)
        .then(({data}) => {
          if(data){
            this.userList = data
          }
        }).catch()
    },
    // 获取减签操作的用户列表
    handleSelectDeleteSignUser() {
      selectDeleteSignUser(this.taskId)
        .then(({data}) => {
          if(data){
            this.userList = data
          }
        }).catch()
    },
    // 获取委托操作的用户列表
    handleSelectDelegateUser() {
      getSelectUserAll()
        .then(({data}) => {
          if(data){
            this.userList = data
          }
        })
    },
    resetHandleUserList(){
      this.completeButton = false
      this.opinion = ''
      this.singleChoice = false
      this.userId = null
      this.userList = []
      this.checkUserList = []
      this.selectUserList = []
    },
    // 单选选中用户
    handleUserCurrentChange(val) {
      if(val){
        this.userId = val.userId + '-' + val.nickName + '-' + val.deptName
      }
    },
    // 多选
    handleSelectionChange(val) {
      if(val) {
        this.selectUserList = val;
      }
    },
    // 多选操作
    handleDeleteSelectUserButton(rows) {
      if (rows) {
        this.$refs.multipleTable.toggleRowSelection(rows);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleProcessInstance() {
      if(this.handlerTitle === Constant.CancelDelegate){
        this.handleCancelDelegateTask()
        return;
      }
      if(this.handlerTitle === Constant.CompleteDelegate) {
        this.handleCompleteDelegateTask()
        return;
      }
      if(this.singleChoice === true){
        if(this.userId !== null) {
          if(this.handlerTitle === Constant.Delegate){
            this.handleDelegateTask()
          }
          if(this.handlerTitle === Constant.RelayComplete) {
            this.handlerRelayCompleteTask()
          }
        } else {
          this.$message({type: 'warning',message: '没有指定用户'})
        }
      }else {
        if(this.userList.length > 0){
          if(this.selectUserList.length > 0){
            if(this.handlerTitle === Constant.AddSign){
              this.handleAddSign()
            }
            if(this.handlerTitle === Constant.DeleteSign){
              this.handleDeleteAddSign()
            }
          }else{
            this.$message({type: 'warning',message: '没有指定用户'})
          }
        }else{
          this.$message({type: 'warning',message: '没有可选用户'})
        }
      }
    },
    // 完成任务
    handleCompleteTask(option) {
      if(
        (this.userList.length > 0 && this.selectUserList.length > 0) ||
        (this.userList.length <= 0)
      ){
        const userList = []
        this.selectUserList.forEach((item) => {
          userList.push(item.userId + '-' + item.nickName + '-' + item.deptName)
        })
        this.map.assigneeList = userList
        console.log(this.map)
        // if(userList.length > 0){
        //   this.map.assigneeList = userList
        // }
        completeTask(this.map, this.taskId, this.opinion, option)
          .then(() => {
            this.$emit('resetInit', 'success', Constant.Complete + '成功')
          }).catch()
      } else {
        this.$message({type: 'warning',message: '没有指定用户'})
      }
    },
    // 委托
    handleDelegateTask() {
      delegate(this.taskId, this.userId, this.opinion)
        .then(() => {
          this.$emit('resetInit', 'success', Constant.Delegate + '成功')
        }).catch(() => {
          this.$emit('resetInit')
        })
    },
    // 转办
    handlerRelayCompleteTask() {
      relayComplete(this.taskId, this.userId, this.opinion)
        .then(() => {
          this.$emit('resetInit', 'success', Constant.RelayComplete + '成功')
        }).catch(() => {
          this.$emit('resetInit')
        })
    },
    // 取消委托
    handleCancelDelegateTask() {
      cancelDelegate(this.taskId, this.opinion)
        .then(() => {
          this.$emit('resetInit', 'success', Constant.CancelDelegate + '成功')
        }).catch(() => {
          this.$emit('resetInit')
        })
    },
    // 完成委托
    handleCompleteDelegateTask() {
      completeDelegate(this.taskId, this.map, this.opinion)
        .then(() => {
          this.$emit('resetInit', 'success', Constant.CompleteDelegate + '成功')
        }).catch(() => {
        this.$emit('resetInit')
      })
    },
    // 加签
    handleAddSign() {
      const userList = []
      this.selectUserList.forEach((item) => {
        userList.push(item.userId + '-' + item.nickName + '-' + item.deptName)
      })
      addSign(this.taskId, userList, this.opinion)
        .then(() => {
          this.$emit('resetInit', 'success', Constant.AddSign + '成功')
        }).catch(() => {
          this.$emit('resetInit')
        })
    },
    // 减签
    handleDeleteAddSign() {
      const userList = []
      this.selectUserList.forEach((item) => {
        userList.push(item.userId + '-' + item.nickName + '-' + item.deptName)
      })
      deleteSign(this.taskId, userList, this.opinion)
        .then(() => {
          this.$emit('resetInit', 'success', Constant.DeleteSign + '成功')
        }).catch(() => {
          this.$emit('resetInit')
        })
    },
  },
}
</script>

<style scoped>

</style>
